<script setup>
import { ref } from 'vue'
import api from '@/api'
import { Message } from '@arco-design/web-vue'
import { useRoute, useRouter } from 'vue-router'

const $route = useRoute()
const $router = useRouter()

const pageVal = ref(1)
const pageSize = ref(10)
const listTotal = ref(0)
const listData = ref()
const formVisible = ref(false)
const formData = ref({
  administrators_id: null,
  name: '',
  username: '',
  password: '',
})

const getAdministratorsList = async (page) => {
  try {
    const res = await api.get('system/contract/administratorsList', {
      params: {
        page,
        pageSize: pageSize.value,
      },
    })
    listData.value = res.data.items
    listTotal.value = res.data.pageInfo.total
    pageVal.value = page
  } catch (error) {
    console.error('error', error)
    return false
  }
}

const showModifyForm = async (record) => {
  formData.value.administrators_id = record.id
  formData.value.name = record.name
  formData.value.username = record.username
  formVisible.value = true
}

const formSubmit = async () => {
  console.log('formData', formData.value)
  var obj = { ...formData.value }
  if (!obj.name) {
    Message.error('姓名不可为空')
    return false
  }
  if (!obj.username) {
    Message.error('登录账号不可为空')
    return false
  }
  try {
    const res = await api.post('system/contract/updateAdministrators', obj)
    Message.success(res.message)
    formVisible.value = false
    getAdministratorsList(1)
    resetFormData()
  } catch (error) {
    console.error('error', error)
    return false
  }
}

const resetFormData = async () => {
  formData.value = {
    administrators_id: null,
    name: '',
    username: '',
    password: '',
  }
}

// getAdministratorsList(1)

defineExpose({
  getAdministratorsList,
})
</script>

<template>
  <a-table :data="listData"
           @page-change="getAdministratorsList"
           :pagination="{
              showTotal: true,
              size: 'small',
              total: listTotal,
              pageSize: pageSize,
              current: pageVal,
            }">
    <template #columns>
      <a-table-column title="序号"
                      :width="60">
        <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
      </a-table-column>
      <a-table-column title="姓名"
                      data-index="name"></a-table-column>
      <a-table-column title="登录账号"
                      data-index="username"></a-table-column>
      <a-table-column title="操作"
                      align="center"
                      :width="300">
        <template #cell="{ record }">
          <a-space>
            <!-- <a-popconfirm @ok="deleteData(record)"
                          content="确认删除该数据吗?"
                          type="warning">
              <a-button type="primary"
                        status="danger"
                        size="mini">删除</a-button>
            </a-popconfirm> -->
            <a-button @click="showModifyForm(record)"
                      type="primary"
                      size="mini">编辑</a-button>
          </a-space>
        </template>
      </a-table-column>
    </template>
  </a-table>

  <a-modal title="编辑超管账号"
           width="600px"
           :on-before-ok="formSubmit"
           v-model:visible="formVisible">
    <a-form>
      <a-form-item label="姓名">
        <a-input v-model="formData.name"
                 :style="{ width: '400px' }"
                 placeholder="请输入姓名" />
      </a-form-item>
      <a-form-item label="登录账号">
        <a-input v-model="formData.username"
                 :style="{ width: '400px' }"
                 placeholder="请输入登录账号" />
      </a-form-item>
      <a-form-item label="登录密码">
        <a-input v-model="formData.password"
                 :style="{ width: '400px' }"
                 :placeholder="formData.administrators_id ? '不输入则为不修改密码' : '请输入密码'" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
